<template>
  <div>
    <el-container>
      <el-header height="200px">
        <el-form :model="queryParams" ref="form" label-width="80px">
          <el-col :span="6">
            <el-form-item label="司机会员号" label-width="100px" prop="driverMid">
              <el-input
                v-model="queryParams.driverMid"
                placeholder="请输入司机会员号"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车牌号" label-width="100px" prop="plateNo">
              <el-input
                v-model="queryParams.plateNo"
                placeholder="请输入车牌号"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货物种类" label-width="100px" prop="goodsType">
              <el-input
                v-model="queryParams.goodsType"
                placeholder="请输入货物种类"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起始地" label-width="100px" prop="startAddress">
              <el-input
                v-model="queryParams.startAddress"
                placeholder="请输入起始地"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目的地" label-width="100px" prop="endAddress">
              <el-input
                v-model="queryParams.endAddress"
                placeholder="请输入目的地"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="里程" label-width="100px" prop="miliage">
              <el-input
                v-model="queryParams.miliage"
                placeholder="请输入里程"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运输合同号" label-width="100px" prop="transprotContractNumber">
              <el-input
                v-model="queryParams.transprotContractNumber"
                placeholder="请输入运输合同号"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="司机姓名" label-width="100px" prop="driverName">
              <el-input
                v-model="queryParams.driverName"
                placeholder="请输入司机姓名"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" label-width="100px">
              <el-radio-group v-model="queryParams.status" size="mini">
                <el-radio
                  v-for="dict in dict.type.waybill_info_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运输方式" label-width="100px" prop="transportMethods">
              <el-input
                v-model="queryParams.transportMethods"
                placeholder="请输入运输方式"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户运单号" label-width="100px" prop="clientTransportNumber">
              <el-input
                v-model="queryParams.clientTransportNumber"
                placeholder="请输入客户运单号"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总价" label-width="100px" prop="totalPrice">
              <el-input
                v-model="queryParams.totalPrice"
                placeholder="请输入总价"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发货人姓名" label-width="100px" prop="consignorName">
              <el-input
                v-model="queryParams.consignorName"
                placeholder="请输入发货人姓名"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发货人电话" label-width="100px" prop="consignorTelephone">
              <el-input
                v-model="queryParams.consignorTelephone"
                placeholder="请输入发货人电话"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人姓名" label-width="100px" prop="consigneeName">
              <el-input
                v-model="queryParams.consigneeName"
                placeholder="请输入收货人姓名"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收货人电话" label-width="100px" prop="consignorTelephone">
              <el-input
                v-model="queryParams.consignorTelephone"
                placeholder="请输入收货人电话"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="发货时间" prop="deliverGoodsTime">
              <el-date-picker clearable size="small"
                              v-model="queryParams.deliverGoodsTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择发货时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="收货时间" prop="receivingTime">
              <el-date-picker clearable size="small"
                              v-model="queryParams.receivingTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择收货时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货物重量" label-width="100px" prop="goodsWeight">
              <el-input
                v-model="queryParams.goodsWeight"
                placeholder="请输入货物重量"
                clearable
                size="mini"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
        </el-form>

      </el-header>
      <el-main>
        <div id="container"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { listWaybill, getWaybill, delWaybill, addWaybill, updateWaybill } from "@/api/business/waybill";
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'WaybillDetail',
  beforeCreate() {
    AMapLoader.load({
      'key': '389743c67294f6e3544aadcd58e0d3f6',              // 申请好的Web端开发者Key，首次调用 load 时必填
      'version': '1.4.15',    // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      'plugins': [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.MapType',
        'AMap.Geolocation',
        'AMap.Driving'],          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      'AMapUI': {             // 是否加载 AMapUI，缺省不加载
        'version': '1.1',   // AMapUI 缺省 1.1
        'plugins': []        // 需要加载的 AMapUI ui插件
      },
      'Loca': {               // 是否加载 Loca， 缺省不加载
        'version': '1.3.2'  // Loca 版本，缺省 1.3.2
      }
    }).then(AMap => {
      this.map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        resizeEnable: true,
        layers: [//使用多个图层
          // new AMap.TileLayer.Satellite(),
          new AMap.TileLayer.RoadNet()
        ],
        zooms: [4, 18],//设置地图级别范围
        zoom: 13
      })
      // AMap.service('AMap.Driving', function() {
      //   var driving = new AMap.Driving({
      //     // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
      //     map: this.map,
      //     policy: AMap.DrivingPolicy.LEAST_TIME
      //   })
      //
      //   var points = [
      //     { keyword: '北京市地震局（公交站）',city:'北京' },
      //     { keyword: '亦庄文化园（地铁站）',city:'北京' }
      //   ]
      //
      //   driving.search(points, function (status, result) {
      //     // 未出错时，result即是对应的路线规划方案
      //     console.log(status);
      //     console.log(result);
      //   })
      // })
      this.loadPlugin(this.map, AMap)
      this.$nextTick(() => this.initMap(AMap))
    }).catch(e => {
      console.error(e)
    })
  },
  // 表单状态
  dicts: ['waybill_info_status'],
  data() {
    return {

      // 表单数据
      queryParams: {
        driverMid: null,
        plateNo: null,
        goodsType: null,
        startAddress: null,
        endAddress: null,
        miliage: null,
        transprotContractNumber: null,
        status: null,
        driverName: null,
        transportMethods: null,
        clientTransportNumber: null,
        totalPrice: null,
        consignorName: null,
        consignorTelephone: null,
        consigneeName: null,
        consigneeTelephone: null,
        deliverGoodsTime: null,
        receivingTime: null,
        goodsWeight: null
      },

      // 以下为地图所需的参数
      marker: {},
      center: {
        l: 0,
        r: 0
      },
      driving: {}


    }
  },
  created() {
    this.getWaybillInfoById(this.$route.query.id)
  },
  methods: {
    getWaybillInfoById(id) {
      getWaybill(id).then(responce => {
        // console.log(responce)
        this.queryParams = responce.data
      })
    },
    loadPlugin(map, AMap) {
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.addControl(new AMap.ToolBar())

      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(new AMap.Scale())

      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      map.addControl(new AMap.OverView({ isOpen: true }))

      // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      map.addControl(new AMap.MapType())

      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      map.addControl(new AMap.Geolocation())

    },
    initMap(AMap) {
      var drivingOption = {

        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        ferry: 1, // 是否可以使用轮渡
        map: this.map,
        hideMarkers: false, // 设置隐藏路径规划的起始点图标
        autoFitView: true
      }

      // 构造路线导航类
      var driving = new AMap.Driving(drivingOption)
      // 根据起终点经纬度规划驾车导航路线
      driving.search(new AMap.LngLat(116.339087, 39.970736), new AMap.LngLat(116.337643, 39.992915), function(status, result) {

        console.log(result)
        if (status === 'complete') {

          console.log('绘制驾车路线完成')
          console.log(result.routes[0].distance) // 获取两地之间的导航的实际距离（米）
          console.log(result.routes[0].time) // 获取两地之间距离所需要的时间（秒）
        } else {

          console.log('获取驾车数据失败：' + result)
        }
      })

    },
  }
}


</script>

<style scoped>
.el-header, .el-footer {
  background-color: #f7fbff;
  color: #333;
  text-align: center;
}


.el-main {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  height: 600px;
}

#container {
  width: 100%;
  height: 100%;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  height: 35px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
